<template>
  <div class="page-container">
    <div class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
          {{ item }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <h2>{{ title }}</h2>
    </div>
    <div class="page-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageContainer',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  computed: {
    // 生成面包屑
    breadcrumbs() {
      const matched = this.$route.matched
      return matched.slice(1).map(item => item.meta.title)
    }
  }
}
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 10px 0 0 0;
  font-size: 18px;
  color: #303133;
}

.page-content {
  width: 100%;
}
</style>
